<template>
  <!-- 收藏 -->
  <view class="andry-collection-list">
    <view class="card" v-for="(item, index) in collectionList" :key="index" >
      <image class="img" :src="item.productImg" @click="onGoodsClick(item)"></image>
      <view class="content">
        <view class="title" @click="onGoodsClick(item)">{{ item.productName }}</view>
        <view class="subtit" @click="onGoodsClick(item)">款号：{{ item.productCode }}</view>
        <view class="similar" @click="AddOrCancel(item,index)">
          <image class="icon" :src="IMG_URL2+'common/close.svg'" ></image>
        </view>
      </view>
    </view>
    <up-divider v-if="collectionList.length>pageSize"  :text="loadStatus"></up-divider>
    <view v-if="collectionList.length==0">
      <Empty :emptyInfo="emptyInfo" />
    </view>
  </view>
</template>

<script setup>
import { IMG_URL2 } from "@/config";
import { shopApi } from "@/api";
import Empty from "@/components/empty.vue";
const EmptyImage = ref(IMG_URL2 + "empty/normal.png");

const emptyInfo = ref({
  image: EmptyImage,
  width: 300,
  height: 300,
  tip: "暂无收藏数据～"
});

const collectionList = ref([]);
let pageSize = ref(10)
let currentPage = ref(1)
let totalCount = ref(0)
let loadStatus =ref('正在加载中')
const loading = ref(false);

// 取消或收藏商品
const AddOrCancel = (item,index)=>{
  let data={
    collect: false,
    productId: item.productId
  }
  loading.value = true;
  shopApi.COLLECTADDCOLLECT(data).then((res) => {
    loading.value = false;
    if(res.code==200){
      collectionList.value.splice(index, 1);
      uni.showToast({
            title: '已取消收藏',
            icon: "none",
            duration: 1000
      });
    }else{
      uni.showToast({
            title: res.errMsg,
            icon: "none",
            duration: 1000
        });
    }
    
  })
}


const getData = (type)=>{
  let data={
    currentPage: currentPage.value,
    pageSize: pageSize.value
  }
  shopApi.COLLECTGETLIST(data).then((res) => {
    if(res.code==200){
      
      totalCount.value=res.result.totalCount
      if(type==1){
        collectionList.value=res.result.data
      }else{
        collectionList.value=res.result.data?collectionList.value.concat(res.result.data):[]
      }
    }else{
            uni.showToast({
                title: res.errMsg,
                icon: "success",
            });
        }
    
  })
}

onLoad((options) => {
  if(options.value){
    integration.value = options.value
  }
  getData(1)
})
// 触底加载
onReachBottom(() => {
  console.log("触底加载");
  uni.showToast({
    title: "触底加载……",
    icon: "none",
    duration: 1000
  });
  if (collectionList.value.length >= totalCount.value) {
    loadStatus.value = "没有更多数据了";
    return
  }
  loadStatus.value = "正在加载中";
  currentPage.value++
  getData(2);
});
// 下拉刷新
onPullDownRefresh(() => {
  console.log("下拉刷新");
  uni.showToast({
    title: "下拉刷新",
    icon: "none",
    duration: 1000
  });
  // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
  loadStatus.value = "正在加载中";
  currentPage.value = 1
  totalCount.value = 0
  isloading.value = false

  collectionList.value = [];

  getData(1)
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 300);
});


onLoad((option) => {
  console.log("url参数", option);
});


// 组件点击事件
const onGoodsClick = (item) => {
  uni.navigateTo({
    url:  `/pages/good/details?id=${item.productId}`
  });
};

</script>

<style lang="scss">
page {
  background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.andry-collection-list {
  padding: 24rpx;
  box-sizing: border-box;
  .card {
    display: flex;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    border-bottom: 2rpx solid #f6f6f6;
    background-color: #fff;
    border-radius: 16rpx;
    position: relative;
    margin-bottom: 24rpx;
    .img {
      width: 96rpx;
      height: 96rpx;
    }

    .content {
      flex: 1;
      margin-left: 24rpx;
    }

    .title {
      font-size: 28rpx;
      color: rgba(44, 44, 44, 1);

    }

    .subtit {
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      color: rgba(0, 0, 0, 0.6);
    }

    .money {
      margin-top: 8rpx;
      color: rgba(214, 142, 68, 1);
    }

    .price {
      font-size: 32rpx;
      font-weight: bold;
    }

    .unit{
      font-size: 24rpx;
    }

    .similar {
      width: 50rpx;
      height: 50rpx;
      padding: 4px;
      box-sizing: border-box;
      position: absolute;
      top: 0rpx;
      right: 0rpx;
      .icon{
        width: 100%;
        height: 100%;
      }
      
    }
  }
}
</style>